<template>
    <view :class="componentsClass">
        <view class="flex-align-items padding-0-10" >
            <text class="info-main">{{data.goodsName}}</text>
            <view class="info-tip-view">
                <text v-if="data.isQuote" class="info-tip">已报价</text>
                <text v-if="data.isSelf && !hideInfo" class="info-tip">我的求购</text>
            </view>
            <view class="publish-time">
                <image class="icon" src="../../static/ibs/img_comm_time.png"></image>
                <text >{{handleData.publishTime}}</text>
            </view>
        </view>
        <view class="flex-align-items item-border-bottom padding-bottom-30">
            <view style="width: 100%">
                <view class="flex-align-items padding-0-10 margin-top-20">
                    <text class="info">国家：{{handleData.countryOrigin}}</text>
					<text class="info">求购量：{{handleData.weight}}</text>
                </view>
                <view class="flex-align-items padding-0-10 margin-top-20">
                    <text class="info">厂号：{{handleData.vendorNo}}</text>
                    <text class="info">接货地：{{handleData.city}}</text>
                </view>
                <view-price-info :data="handleData" :params="priceparams">

                </view-price-info>
            </view>
            <text v-if="showQouteButton && !hideQuote" class="button-class" @click="OnQuote(data)">报价</text>
            <image v-if="(showInfoIcon && !hideInfo) || showplaceholder" class="info-icon" :src="getInfoIcon" mode="aspectFit"></image>
        </view>
        <view-price-info style="padding: 0 20upx;" :data="handleData" :params="params"  :option="option" :contentClass="contentClass" >

        </view-price-info>
        <slot name="bottomSlot"></slot>
    </view>
</template>
<script >
    import  ViewPriceInfo from '@/components/ibs/viewPriceInfo.vue'
    import validate from '@/common/graceChecker.js';
    export default {
        components: {
            ViewPriceInfo
        },
        props: {
            data: Object, // 数据
            params: {
                type: Object,
                default() {
                    return [
                        {key: 'goodsName'}, // 货物名称
                        {key: 'isOffered'}, // 是否已报价
                        {key: 'time'}, //发布时间
                        {label: '产地', key: 'vendor'}, // 产地
                        {label: '厂号', key: 'factorNo'}, // 厂号
                        {label: '求购地', key: 'factorNo'}, // 求购地
                        {label: '求购', key: 'buyWeight'} // 重量
                    ];
                }
            },
            differClass: Array, // 差异化的样式
             // 是否显示报价按钮
            qouteButton: {
                type: Boolean,
                default: true
            },
            // 价格查看/拨打电话按钮
            hideInfo: {
                type: Boolean,
                default: false
            },
            // 是否隐藏报价按钮
            hideQuote: {
                type: Boolean,
                default: false
            },
            infoIcon: String, // 提示信息图标 例如：已成交的求购提示图标
            showplaceholder: Boolean, // 是否显示占位元素
            priceparams: Array, // 我的求购列表显示的求购价格信息
            optionParam: Object, // 操作按钮参数
            contentClass: Array,
            optionMethod: Function // 查看/或拨打电话的操作函数
        },
        data() {
            return {
            };
        },
        onLoad() {
            // console.log('onLoad: ' + JSON.stringify(this.data));
        },
        computed: {
            handleData() {
                let handledData = {};
                Object.assign(handledData, this.data);
                handledData.city = !validate.stringIsNullOrEmpty(this.data.city) ? this.data.city : '-';
                handledData.contactMobileNo = !validate.stringIsNullOrEmpty(this.data.contactMobileNo) ? this.data.contactMobileNo : '-';
                handledData.countryOrigin = !validate.stringIsNullOrEmpty(this.data.countryOrigin) ? this.data.countryOrigin : '-';
                handledData.publishTime = !validate.stringIsNullOrEmpty(this.data.publishTime) ? this.data.publishTime : '-';
                handledData.intentPrice = !validate.stringIsNullOrEmpty(this.data.intentPrice) ? this.data.intentPrice : '-';
                handledData.remarkDemand = !validate.stringIsNullOrEmpty(this.data.remarkDemand) ? this.data.remarkDemand : '-';
                handledData.vendorNo = !validate.stringIsNullOrEmpty(this.data.vendorNo) ? this.data.vendorNo : '-';
                handledData.weight = !validate.stringIsNullOrEmpty(this.data.weight) ? this.data.weight + '吨' : '-';
                handledData.quoteCount = !validate.stringIsNullOrEmpty(this.data.quoteCount) ? this.data.quoteCount : '-';
                handledData.seeCount = !validate.stringIsNullOrEmpty(this.data.seeCount) ? this.data.seeCount : '-';
                return handledData;
            },
            option() {
                let isPay = this.data.isPay;
                let isSelf = this.data.isSelf;
                let option = {
                    icon: isPay || isSelf ? '../../static/ibs/img_xomm_dial.png' : '../../static/ibs/img_comm_see.png',
                    label: isPay || isSelf ? '拨号' : '查看',

                };
                if (typeof this.optionMethod == 'function') {
                    option.optionClick = this.optionMethod;
                }
                // console.log('tradeItem  option: ' + JSON.stringify(this.optionParam ? this.optionParam : option));
                return this.optionParam ? this.optionParam : option;
            },
            // 是否显示报价按钮
            showQouteButton() {
                // console.log('showQouteButton: ' + JSON.stringify(this.data));
                return this.data.status == 1;
            },
            // 根据求购的状态判断是否显示提示信息图标
            showInfoIcon() {
                // console.log('showInfoIcon: ' + JSON.stringify(this.data));
                return this.data.status == 3;
            },
            // 根据求购的状态获取显示提示信息图标
            getInfoIcon() {
                return this.data.status == 3 ? this.infoIcon : '';
            },
            // 求购组件的样式
            componentsClass() {
                let classs = ['components-trade-item'];
                if (this.differClass && this.differClass.length > 0) {
                    classs = classs.concat(this.differClass);
                }
                return classs;
            }
        },
        methods: {
             OnQuote(id){
				 let that=this;
				 console.log("id===============",id);
				 that.$emit('OnQuote',id);
			 },
        }
    };
</script>
<style>
    .components-trade-item {
        border-radius: 8upx;
        border: 1upx #e5e5e5 solid;
        padding: 30upx 10upx 0;
        background-color: #ffffff;
        margin-top: 20upx;
    }
    .components-trade-item .padding-0-10{
        padding: 0 10upx;
    }
    .components-trade-item .margin-top-20{
        margin-top: 20upx;
    }
    .components-trade-item .padding-bottom-30{
        padding-bottom: 30upx;
    }
    .components-trade-item .flex-align-items {
        display: flex;
        vertical-align: middle;
        font-size: 28upx;
        color: #1a1a1a;
        background-color: #ffffff;
        align-items: center;
        justify-content: space-between;
    }
    .components-trade-item .item-border-bottom {
        border-bottom: 1px #e6e6e6 dashed;
    }
    .components-trade-item .button-class {
        font-size: 28upx;
        width: 120upx;
        height: 48upx;
        line-height: 48upx;
        border-radius: 24upx;
        border: 2upx #077131 solid;
        text-align: center;
        background-color: #077131;
        color: #ffffff;
        float: right;
        flex-shrink: 0;
        margin-right: 10upx;
        padding: 0;
    }
    .components-trade-item .icon {
        width: 20upx;
        height: 20upx;
        margin-right: 10upx;
    }
    .components-trade-item .info-main {
        flex-shrink: 0;
        font-size: 30upx;
        height: 32upx;
        line-height: 32upx;
    }
    .components-trade-item .info {
        flex-shrink: 0;
        width: 50%;
        font-size: 28upx;
    }
    .components-trade-item .info-icon {
        width: 100upx;
        height: 76upx;
        line-height: 76upx;
        float: right;
        flex-shrink: 0;
        margin-right: 10upx;
    }
    .components-trade-item .publish-time {
        float: right;
        flex-shrink: 0;
        font-size: 20upx;
    }
    .components-trade-item .info-tip {
        width: auto;
        height: 32upx;
        line-height: 32upx;
        margin-left: 20upx;
        padding: 0 8upx;
        text-align: center;
        border-radius: 16upx;
        border: 2upx #f5b431 solid;
        color: #f5b431;
        font-weight: bold;
        font-size: 20upx;
    }
    .components-trade-item .info-tip-view {
        width: 100%;
    }
</style>